<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="shortcut icon" th:href="@{/img/favicon.jpg}" type="image/x-icon">
    <link rel="stylesheet" th:href="@{/css/common-dark.css}" />
    <script type="text/javascript" th:src="@{/js/jquery/jquery.js}"></script>
    <script type="text/javascript" th:src="@{/js/anime/anime.js}"></script>
    <script type="text/javascript" th:src="@{/js/anime/anime.es.js}"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        html,
        body {
            --ccft-cs-background: #000;
            --ccft-cs-on-surface: #fff;
            --ccft-cs-surface: #fff;
            --ccft-cs-primary: hsl(14, 97%, 65%);
            --ccft-cs-primary-alt: hsla(14, 97%, 65%, .3);
            --ccft-ts-primary: Montserrat, sans-serif;
            --ccft-ts-secondary: 'Abril Fatface', serif;
            --ccft-spacer-x: 40px;
            --ccft-spacer-y: 40px;
            --ccft-brand-size: 60px;

            background-color: var(--ccft-cs-background);
            font-family: var(--ccft-ts-primary);
            margin: 0;
        }
        .layout {
            background-image: url("/img/login/loginBg.jpg");
            background-position: 0 0;
            background-size: cover;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        .layout.nav--active main {
            opacity: .2;
            user-select: none;
        }

        .layout__backdrop,
        .layout__frontdrop {
            background-color: rgba(0, 0, 0, .3);
            content: '';
            display: block;
            height: 100%;
            left: 0;
            position: fixed;
            transform-origin: 0% 50%;
            width: 100%;
            z-index: 0;
        }

        .layout__backdrop {
            transform: scaleX(.34) translateX(calc(67% * 3));
        }

        .layout.nav--active .layout__frontdrop {
            background-color: var(--ccft-cs-primary-alt);
            visibility: visible;
        }

        .layout__frontdrop {
            opacity: 0;
            visibility: hidden;
            z-index: 2;
        }

        .layout__wrapper {
            display: grid;
            grid-template-columns: 300px repeat(3, 1fr);
            margin: auto;
            height: 100%;
        }

        .layout__main {
            transition: opacity .3s;
            z-index: 1;
        }

        .hero {
            padding-top: 10rem;
        }

        .hero-title {
            color: #fff;
            font-family: var(--ccft-ts-secondary);
            font-weight: 400;
            font-size: 4.75rem;
            line-height: 1.2;
            margin-left: auto;
            margin-right: 5rem;
            margin-bottom: 0;
            position: relative;
            width: 32.5rem;
            z-index: 1;
        }

        .hero-title em {
            display: block;
            font-size: 2rem;
            font-style: normal;
            line-height: 1.2;
            transform: translateX(2.5rem);
        }

        .hero-text {
            background-color: rgba(0, 0, 0, .3);
            color: #fff;
            font-size: .92rem;
            line-height: 1.75;
            margin: 0;
            margin-left: auto;
            margin-right: 6rem;
            padding: 5rem 3rem 3rem;
            transform: translateY(-3rem);
            width: 50%;
            z-index: 0;
        }

        .hero-form {
            background-color: rgba(0, 0, 0, .3);
            color: #fff;
            font-size: .92rem;
            line-height: 1.75;
            margin: 0;
            margin-left: auto;
            margin-right: 6rem;
            padding: 5rem 3rem 3rem;
            transform: translateY(-3rem);
            width: 50%;
            z-index: 0;
        }

        .hero-text a {
            box-shadow: 0 4px #fff;
            color: #fff;
            text-decoration: none;
        }

        .hero-block--content > *:last-child {
            margin-bottom: 0;
        }

        .layout__main {
            display: flex;
            flex-direction: column;
        }

        .layout__header {
            height: 100%;
            z-index: 2;
        }

        .layout__header nav {
            height: 100%;
        }

        .layout__main {
            grid-column: span 3;
        }

        .nav {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .nav--header-1 {
            counter-reset: n;
            height: 100%;
            padding: 0 2rem;
            position: relative;
        }

        .nav--header-1 > .nav__item:not(.nav__item--home) {
            counter-increment: n;
        }

        .nav--header-1 > .nav__item:not(.nav__item--home) > .nav__link {
            color: var(--ccft-cs-on-surface);
            display: block;
            font-family: var(--ccft-ts-secondary);
            font-size: 1.75rem;
            line-height: 1;
            letter-spacing: .045em;
            padding: 1rem 1rem;
            padding-left: 3rem;
            padding-top: 3rem;
            position: relative;
            overflow: hidden;
            text-decoration: none;
            transition: transform .2s;
            transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            z-index: 1;
        }

        .nav--header-1 > .nav__item > .nav__link::before {
            content: counter(n, decimal-leading-zero);
            display: block;
            font-family: var(--ccft-ts-primary);
            font-size: 6rem;
            font-weight: bold;
            left: 0;
            top: 0;
            opacity: .25;
            position: absolute;
            transition: transform .2s;
            z-index: -1;
        }

        .nav--header-1 > .nav__item > .nav__link:hover,
        .nav--header-1 > .nav__item.nav__item--active > .nav__link {
            color: var(--ccft-cs-primary);
            transform: translateX(.5rem);
        }

        .nav--header-1 > .nav__item.nav__item--active .nav--header-2 {
            visibility: visible;
        }

        .nav--header-1 .nav__item--home {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14.145 8.633l-2.145-8.633-2.148 8.636c-.572.366-1.034.877-1.358 1.477l-8.494 1.887 8.494 1.887c.324.6.786 1.111 1.358 1.477l2.148 8.636 2.157-8.64c.571-.367 1.03-.879 1.353-1.479l8.49-1.881-8.492-1.884c-.324-.603-.788-1.116-1.363-1.483zm-2.145 5.367c-1.104 0-2-.896-2-2s.896-2 2-2 2 .896 2 2-.896 2-2 2zm7 5l-3.43-2.186c.474-.352.893-.771 1.245-1.245l2.185 3.431zm-3.521-11.882l3.521-2.117-2.119 3.519c-.386-.542-.86-1.015-1.402-1.402zm-6.955 9.767l-3.524 2.115 2.118-3.521c.387.543.862 1.018 1.406 1.406zm-1.34-8.453l-2.184-3.431 3.431 2.184c-.474.352-.894.772-1.247 1.247z" fill="rgb(255, 255, 255)" style="transform-origin: 50% 50%; transform: rotateZ(-27deg);"/></svg>');
            background-position: 0px 50%;
            background-repeat: no-repeat;
            background-size: var(--ccft-brand-size) var(--ccft-brand-size);
            margin-bottom: 60px;
            padding: 0;
        }

        .nav--header-1 .nav__item--home > .nav__link {
            display: block; /* Necessary for text-indent to work */
            height: calc(var(--ccft-brand-size) + 40px);
            text-indent: -999px;
        }

        .nav--header-2 {
            height: 100%;
            left: 270px;
            opacity: 0;
            padding: 2.5rem 5rem;
            position: fixed;
            top: 0;
            visibility: hidden;
            width: 100%;
        }

        .nav--header-2::before {
            background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z" fill="rgb(255, 255, 255)"/></svg>');
            background-repeat: no-repeat;
            background-size: 30px 30px;
            content: '';
            cursor: pointer;
            display: block;
            margin-bottom: 6rem;
            height: 30px;
            width: 30px;
        }

        .nav--header-2 > .nav__item {
            margin-bottom: 2.75rem;
        }

        .nav--header-2 > .nav__item > .nav__link {
            background-image: linear-gradient(to bottom, var(--ccft-cs-primary) 0%, var(--ccft-cs-primary) 100%);
            background-position: 0 100%;
            background-repeat: repeat-x;
            background-size: 6px 6px;
            color: #fff;
            font-family: var(--ccft-ts-primary);
            font-size: 2.75rem;
            font-weight: bold;
            letter-spacing: .05em;
            text-decoration: none;
            transition: background-size .25s, color .3s;
        }

        .nav--header-2 > .nav__item > .nav__link:hover {
            background-size: 6px 50px;
            color: #000000;
        }
    </style>
</head>
<body>
<!--<canvas class="fireworks" style="position:fixed;"></canvas>-->
<div class="layout">
    <div class="layout__backdrop"></div>
    <div class="layout__frontdrop"></div>
    <div class="layout__wrapper">
        <header class="layout__header">
            <nav>
                <ul class="nav nav--header nav--header-1">
                    <li class="nav__item nav__item--home">
                        <a class="nav__link" href="#0">Home</a>
                    </li>
                    <li class="nav__item nav__item--about">
                        <a class="nav__link" href="#0">About</a>
                    </li>
                    <li class="nav__item nav__item--clients">
                        <a class="nav__link" href="#0">Clients</a>
                        <ul class="nav nav--header nav--header-2">
                            <li class="nav__item">
                                <a class="nav__link" href="#0">Burger King</a>
                            </li>
                            <li class="nav__item">
                                <a class="nav__link" href="#0">Southwest Airlines</a>
                            </li>
                            <li class="nav__item">
                                <a class="nav__link"  href="#0">Levi Strauss</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav__item nav__item--services">
                        <a class="nav__link" href="#0">Services</a>
                        <ul class="nav nav--header nav--header-2">
                            <li class="nav__item">
                                <a class="nav__link" href="#0">Print Design</a>
                            </li>
                            <li class="nav__item">
                                <a class="nav__link" href="#0">Web Design</a>
                            </li>
                            <li class="nav__item">
                                <a class="nav__link" href="#0">Mobile App Development</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav__item nav__item--contact">
                        <a class="nav__link" href="#0">Contact</a>
                    </li>
                </ul>
            </nav>
        </header>
        <main class="layout__main">
            <section class='hero'>
                <div class="hero-block hero-block--header">
                    <h1 class="hero-title">
                        Student<em>Started 2022.</em>
                    </h1>
                    <p class="hero-text">
                    <form class="hero-form" action="sys/login" method="post">
                        <label for="account">account:</label>
                        <input type="text" value="1" id="account" name="account" />
                        <br><br>
                        <label for="password">password:</label>
                        <input type="password" id="password" value="1" name="password">
                        <br><br>
                        <input type="button" id="submit" value="login">
                    </form>
                </div>
            </section>
        </main>
    </div>
</div>
<script type="text/javascript">
    const rootPath = '/student';
    $(function () {
        $("#index").click(function () {
            window.location.href = "/sys/index";
        });
        $("#submit").click(function () {
            $.post("/sys/login", {
                account: $("#account").val(),
                password: $("#password").val()
            }, function (data) {
                if (data.status === 200) {
                    window.location.href = data.msg;
                } else {
                    alert(data.msg)
                    return false;
                }
            });
        });
    });

</script>
<script>
    const items = document.querySelectorAll('.nav--header-1 > .nav__item');
    const rootElement = document.querySelector('.layout');
    const colors = [
        'hsla(14, 97%, 65%, 0.4)',
    ];
    const state = {
        navigationItems: {},
        root: rootElement,
    };

    for (let navItemIndex = 0; navItemIndex < items.length; ++navItemIndex) {
        const stateItem = {
            color: colors[navItemIndex % colors.length],
            element: items[navItemIndex],
            id: navItemIndex,
            isActive: false,
            type: 'DEFAULT',
        }

        const subNav =  items[navItemIndex].querySelector('.nav');
        if (subNav) {
            // current element has a subNav.
            stateItem.childNavigation = subNav;
            stateItem.type = 'PARENT';
        }

        stateItem.onClick = (event) => {
            const actualOnClick = () => {
                if (state.activeItem === navItemIndex) {
                    return;
                }

                if (state.activeItem) {
                    state.activeItem = null;
                }

                if ('PARENT' === state.navigationItems[navItemIndex].type) {
                    // Set new active item.
                    state.activeItem = navItemIndex;

                    animateShow(state);
                }
            };

            if (state.activeItem) {
                return animateHide(state, actualOnClick);
            }

            return actualOnClick();
        };

        // Add this item to the state.
        state.navigationItems[navItemIndex] = stateItem;
    }

    const animateShow = (state) => {
        const animation = anime.timeline();
        console.log(state.navigationItems[state.activeItem]);

        animation.add({
            backgroundColor: state.navigationItems[state.activeItem].color,
            begin: () => {
                state.root.classList.add('nav--active');
            },
            complete: () => {
                state.navigationItems[state.activeItem].element.classList.add('nav__item--active');
            },
            duration: 450,
            easing: 'easeOutExpo',
            opacity: 1,
            translateX: [
                {delay: 300, value: '270px',},
            ],
            scaleX: [
                {value: 0},
                {value: 1},
            ],
            targets: '.layout__frontdrop',
        })
            .add({
                duration: 70,
                opacity: [0, 1],
                targets: state.navigationItems[state.activeItem].childNavigation,
            }).add({
            delay: anime.stagger(70),
            opacity: [0, 1],
            translateY: ['100%', '0'],
            targets: state.navigationItems[state.activeItem].childNavigation.querySelectorAll('.nav__item'),
        });

        return animation;
    };

    const animateHide = (state, complete) => {
        const animation = anime.timeline({
            complete: complete,
        });

        animation.add({
            duration: 210,
            opacity: [1, 0],
            translateY: [0, '+=50px'],
            targets: state.navigationItems[state.activeItem].childNavigation,
        }).add({
            complete: () => {
                // Clean-up current active item.
                state.root.classList.remove('nav--active');
                state
                    .navigationItems[state.activeItem]
                    .element
                    .classList
                    .remove('nav__item--active')
                ;
            },
            duration: 250,
            easing: 'easeOutCirc',
            scaleX: [
                {value: 0,},
            ],
            translateX: [
                {value: 0},
            ],
            targets: '.layout__frontdrop',
        });

        return animation;
    };

    (() => {
        // Ready to fight.
        const introAnimation = anime.timeline({
            complete: () => {
                for (let stateItemIndex = 0; stateItemIndex < Object.values(state.navigationItems).length; ++ stateItemIndex) {
                    state.navigationItems[stateItemIndex].element.addEventListener(
                        'click',
                        state.navigationItems[stateItemIndex].onClick
                    );

                    // Reset transform to prevent the implicit z-index / position relative to trigger.
                    state.navigationItems[stateItemIndex].element.style.transform = '';
                }
            },
        });

        introAnimation.add({
            duration: 350,
            delay: 1000,
            easing: 'easeOutCirc',
            targets: '.layout__backdrop',
            scaleX: [0, 1],
        }).add({
            delay: anime.stagger(75),
            duration: 450,
            easing: 'easeOutCirc',
            opacity: [0, 1],
            translateY: ['100%', '0%'],
            targets: '.nav--header-1 > .nav__item:not(.nav__item--home)',
        }).add({
            easing: 'easeOutExpo',
            targets: '.layout__backdrop',
            translateX: [
                {delay: 350, value: (67) + '%'},
            ],
        }).add({
            duration: 350,
            easing: 'easeOutExpo',
            targets: '.hero-title',
            opacity: [0, 1],
            translateY: ['50px', '0'],
        }).add({
            duration: 350,
            easing: 'easeOutExpo',
            targets: '.hero-text',
            opacity: [0, 1],
            translateY: ['0', '-3rem'],
        }, '-=100');
    })();

    var canvasEl = document.querySelector('.fireworks');
    var ctx = canvasEl.getContext('2d');
    var numberOfParticules = 30;
    var pointerX = 0;
    var pointerY = 0;
    //是否为移动端 || 返回当前设备能够支持的最大同时触摸的点数
    var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown';
    var fireColors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C'];

    //监听所有点击事件
    document.addEventListener(tap, function(e) {
        render.play();
        updateCoords(e);
        animateParticules(pointerX, pointerY);
    }, false);

    var render = anime({
        duration: Infinity,
        update: function() {
            ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
        }
    });

    function setCanvasSize() {
        canvasEl.width = window.innerWidth * 2;
        canvasEl.height = window.innerHeight * 2;
        canvasEl.style.width = window.innerWidth + 'px';
        canvasEl.style.height = window.innerHeight + 'px';
        canvasEl.getContext('2d').scale(2, 2);
    }

    function updateCoords(e) {
        pointerX = e.clientX || e.touches[0].clientX;
        pointerY = e.clientY || e.touches[0].clientY;
    }

    function setParticuleDirection(p) {
        var angle = anime.random(0, 360) * Math.PI / 180;
        var value = anime.random(50, 180);
        var radius = [-1, 1][anime.random(0, 1)] * value;
        return {
            x: p.x + radius * Math.cos(angle),
            y: p.y + radius * Math.sin(angle)
        }
    }

    function createParticule(x,y) {
        var p = {};
        p.x = x;
        p.y = y;
        p.color = fireColors[anime.random(0, fireColors.length - 1)];
        p.radius = anime.random(16, 32);
        p.endPos = setParticuleDirection(p);
        p.draw = function() {
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
            ctx.fillStyle = p.color;
            ctx.fill();
        }
        return p;
    }

    function createCircle(x,y) {
        var p = {};
        p.x = x;
        p.y = y;
        p.color = '#FFF';
        p.radius = 0.1;
        p.alpha = .5;
        p.lineWidth = 6;
        p.draw = function() {
            ctx.globalAlpha = p.alpha;
            ctx.beginPath();
            ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
            ctx.lineWidth = p.lineWidth;
            ctx.strokeStyle = p.color;
            ctx.stroke();
            ctx.globalAlpha = 1;
        }
        return p;
    }

    function renderParticule(anim) {
        for (var i = 0; i < anim.animatables.length; i++) {
            anim.animatables[i].target.draw();
        }
    }

    function animateParticules(x, y) {
        var circle = createCircle(x, y);
        var particules = [];
        for (var i = 0; i < numberOfParticules; i++) {
            particules.push(createParticule(x, y));
        }
        anime.timeline().add({
            targets: particules,
            x: function(p) { return p.endPos.x; },
            y: function(p) { return p.endPos.y; },
            radius: 0.1,
            duration: anime.random(1200, 1800),
            easing: 'easeOutExpo',
            update: renderParticule
        })
            .add({
                targets: circle,
                radius: anime.random(80, 160),
                lineWidth: 0,
                alpha: {
                    value: 0,
                    easing: 'linear',
                    duration: anime.random(600, 800),
                },
                duration: anime.random(1200, 1800),
                easing: 'easeOutExpo',
                update: renderParticule,
                offset: 0
            });
    }
    setCanvasSize();
    window.addEventListener('resize', setCanvasSize, false);
</script>
</body>
</html>